<template>
  <div class="hello" >
    <tagPage ref="tagPage" :dataCount="dataCount" style="padding: 5%;" @select="selectTagPage"/>
    <van-divider />
    <div style="display: flex;">
      <keyword :keywordData="keywordData" :selectData="selectData" @search="selectKeyword"/>
    </div>
    <div style="padding:30px">
      <Table :tableData="tableData" :tableColumns="tableColumns"></Table>
    </div>
    <div>
      <!-- <xiaoshuo></xiaoshuo> -->
    </div>
  </div>
</template>

<script>
import Table from '@/views/component/table.vue'
import keyword from '@/views/component/keyword.vue'
import tagPage from '@/views/component/tagPage.vue'

import { mixin } from '@/views/component/mixin.js'

import { getWaitAuditCount } from '@/api/index.js'


// import xiaoshuo from '@/views/component/xiaoshuo.vue'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    keyword,
    Table,
    tagPage,
    // xiaoshuo
  },
  data() {
    return {
      // keywordData:[],
      keywordData:mixin.keywordData,
      keyword:'',
      formData:'',
      postOptions:[],
      option:{},
      form:'',

      showUserList: true,
      tableData:[{
        serialNo: "123",
        areaName: "123",
        vipCardNum: "123",
        submitType: { name: 'BATCH' }
      }],
      defaultTableColumns: [
        { label: "审批单号", prop: "serialNo", width: "70", fixed: 'left' },
        { label: "县分", prop: "areaName", width: "80" },
        { label: "贵宾卡号", prop: "vipCardNum", width: "80" },
        { label: "单位名称", prop: "companyName", width: "80" },
        { label: "关键人职务", prop: "keyPersonJob", width: "80" },
        { label: "关键人姓名", prop: "keyPersonName", width: "80" },
        { label: "受理人号码", prop: "businessNo", width: "80" },
        { label: "优惠开始时间", prop: "adjustAccountStart", width: "80" },
        { label: "优惠结束时间", prop: "adjustAccountEnd", width: "80" },
        
        

        { label: "小户名", prop: "keyPersonJob", width: "80" },

        { label: "原每月优惠金额", prop: "extraInfo.ORIGINAL_MONTHLY_DISCOUNT_AMOUNT", width: "80" },
        { label: "合同开始年月", prop: "extraInfo.CONTRACT_START_YEAR_MONTH", width: "80" },
        { label: "合同结束年月", prop: "extraInfo.CONTRACT_END_YEAR_MONTH", width: "80" },
        { label: "包保月费", prop: "extraInfo.FIBER_MONTHLY_FEE", width: "80" },
        { label: "光纤月费", prop: "extraInfo.FIBER_MONTHLY_FEE", width: "80" },
        { label: "酒盟总计月费", prop: "extraInfo.FIBER_MONTHLY_FEE", width: "80" },
        { label: "项目赠送总费用", prop: "extraInfo.FIBER_MONTHLY_FEE", width: "80" },

        { label: "申请类型", prop: "submitType.message", width: "80" },

        { label: "当前流程阶段", prop: "taskProcessName", width: "80" },
        { label: "需求发起人", prop: "submitName", width: "80" },
        { label: "当前处理人", prop: "auditorList", width: "80" },
        { label: "操作", prop: "custom", width: "80" },
        
      ],
      tableColumns:[],
      selectData:[{
        value: '1',
        text: '政企工作助手数据-要客关键人',
      },
      {
        value: '2',
        text: '手动输入-非要客关键人',
      }],
      dataCount:{  
        fiberWaitAuditCount: 13,
        largeOrderDiscountWaitAuditCount: 26,
        packageGuaranteeWaitAuditCount: 9,
        projectGiftWaitAuditCount: 1,
        serviceCardWaitAuditCount: 86,
        wineAllianceWaitAuditCount: 0
      }
    }
  },

  mounted() {
  //  console.log('mixin',mixin);
  // getWaitAuditCount({}).then(res=>{
  //   console.log('res',res); 
  // })
  this.tableColumns = this.defaultTableColumns.filter(column => {
            return ['审批单号', '县分', '贵宾卡号','单位名称','关键人职务','关键人姓名','受理人号码',
            '优惠开始时间','优惠结束时间','当前流程阶段','需求发起人','当前处理人','操作'].includes(column.label);
          });
  },
  methods: {
    areaChange(){},
    init(){},
    selectKeyword(data){
      // console.log('data',data);
      // this.$refs.tagPage.search() 
    },
    selectTagPage(data){
      // 返回类型 1 服务卡 2 大单优惠 3 包保 4 光纤 5 酒盟 6 项目赠送
      console.log('data',data);
      const labelMap = {
        '服务卡': '关键人姓名',
        '大单优惠': '关键人姓名',
        '包保': '小户名',
        '光纤': '小户名',
        '酒盟': '小户名',
        '项目赠送': '小户名'
      };
      this.keywordData.map((item) => {
        if(item.key === 'keyPersonNameLike'){
          item.label = labelMap[data.name];
          item.placeholder = '请输入'+labelMap[data.name]
        }
      });

      // 根据不同的tagPage返回类型显示不同的表头
      switch (data.name) {
        case '服务卡':
        console.log('this.tableColumns',this.tableColumns);
          this.tableColumns = this.defaultTableColumns.filter(column => {
            return ['审批单号', '县分', '贵宾卡号','单位名称','关键人职务','关键人姓名','受理人号码',
            '优惠开始时间','优惠结束时间','当前流程阶段','需求发起人','当前处理人','操作'].includes(column.label);
          });
          break;
        case '大单优惠':
          console.log('this.tableColumns',this.tableColumns);
          this.tableColumns = this.defaultTableColumns.filter(column => {
            return ['审批单号', '县分', '贵宾卡号','单位名称','关键人职务','关键人姓名','受理人号码','优惠开始时间',
            '优惠结束时间','当前流程阶段','需求发起人','当前处理人','操作'].includes(column.label);
          });
          break;
        case '包保':
        console.log('this.tableColumns',this.tableColumns);
          this.tableColumns = this.defaultTableColumns.filter(column => {
            return ['审批单号', '县分', '贵宾卡号','单位名称','小户名','受理人号码','优惠开始时间',
            '优惠结束时间','原每月优惠金额','包保月费','合同开始年月','合同结束年月',
            '当前流程阶段','需求发起人','当前处理人','申请类型','操作'].includes(column.label);
          });
          break;
        case '光纤':
          this.tableColumns = this.defaultTableColumns.filter(column => {
            return ['审批单号', '县分', '贵宾卡号','单位名称','小户名','受理人号码','优惠开始时间',
            '优惠结束时间','原每月优惠金额','光纤月费','合同开始年月','合同结束年月',
            '当前流程阶段','需求发起人','当前处理人','申请类型','操作'].includes(column.label);
          });
          break;
        case '酒盟':
          this.tableColumns = this.defaultTableColumns.filter(column => {
            return ['审批单号', '县分', '贵宾卡号','单位名称','小户名','受理人号码','优惠开始时间',
            '优惠结束时间','原每月优惠金额','酒盟总计月费','合同开始年月','合同结束年月',
            '当前流程阶段','需求发起人','当前处理人','申请类型','操作'].includes(column.label);
          });
          break;
        case '项目赠送':
          this.tableColumns = this.defaultTableColumns.filter(column => {
            return ['审批单号', '县分', '贵宾卡号','单位名称','小户名','受理人号码','优惠开始时间',
            '优惠结束时间','原每月优惠金额','项目赠送总费用','合同开始年月','合同结束年月',
            '当前流程阶段','需求发起人','当前处理人','申请类型','操作'].includes(column.label);
          });
          break;
        default:
          // this.tableColumns = this.defaultTableColumns;
      }
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
